.head_c {
    position: relative;
    height: 480rpx;
}

.white_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.head_bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 440rpx;
}

.head_info {
    box-sizing: border-box;
    position: absolute;
    bottom: 150rpx;
    z-index: 2;
    width: 100%;
    color: #FFF;

    .user_info {
        position: relative;
        display: flex;
        align-items: center;

        .face {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            overflow: hidden;
        }

        .right_content {
            flex: 1;
            padding-left: 20rpx;

            .nick {
                font-size: 32rpx;
                font-weight: bold;
            }

            .tel {
                margin: 4rpx 0;
            }
        }

        .settings {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);

            .icon {
                width: 40rpx;
                height: 40rpx;
            }
        }
    }
}

.main {
    position: absolute;
    left: 0;
    top: 420rpx;
    right: 0;
    padding: 0 20rpx;
}

.my_earnings {
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    background-color: #fff;

    .list_c {
        display: flex;
        padding: 30rpx 20rpx;
        border-bottom: 2rpx solid var(--borderColor);

        .list {
            flex: 1;
            display: flex;
            justify-content: center;

            .price {
                padding-bottom: 8rpx;
                font-size: 32rpx;
                color: var(--themColor);
            }

            .text {
                color: var(--themColorGrey);
            }
        }


        .middle {
            justify-content: center;
            border-left: 2rpx solid #E6E6E6;
            border-right: 2rpx solid #E6E6E6;
        }

        .item {
            text-align: center;

            .icon {
                margin-left: 4rpx;
            }
        }
    }

    .bar {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        padding: 20rpx;

        .special {
            color: var(--themColor);
        }
    }
}

.supply_and_stock {
    columns: 2;
    column-gap: 20rpx;

    .item {
        flex: 1;
        position: relative;
        text-align: center;

        .content {
            position: absolute;
            top: 18rpx;
            left: 50%;
            width: 100%;
            transform: translateX(-50%);
        }

        .label {
            margin-bottom: 24rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #fff;
        }

        .row {
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 48rpx;

            .icon {
                margin-bottom: 2rpx;
                width: 34rpx;
                height: 34rpx;
            }
        }

        .special {
            color: var(--themColor);
        }

        .hide {
            opacity: 0;
        }

        .tip {
            margin-top: 40rpx;
            font-size: 24rpx;
        }

        .bg {
            width: 100%;
            height: 345rpx;
        }
    }
}

.function {
    margin: 20rpx 0 60rpx;
    padding-bottom: 20rpx;
    border-radius: 20rpx;
    background-color: #fff;

    .title {
        padding: 20rpx;
        font-weight: 600;
    }

    .nav_c {
        border-radius: 20rpx;
        overflow: hidden;

        --grid-item-text-color: #434343;
        --grid-item-text-font-size: 24rpx;
        --grid-item-content-padding: 20rpx 0rpx;

        .van-grid-item__icon+.van-grid-item__text {
            margin-top: 24rpx;
        }

        .van-grid-item__text {
            font-weight: bold;
        }

        .van-icon {
            width: 68rpx;
            height: 68rpx;
            border-radius: 50%;
        }
    }

}

.brace {
    padding-top: 20rpx;
}